#member {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  overflow: hidden;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100vh;
  background-color: #305f7b;
  text-align: center;
}

/* 箭头 */
.close-arrow {
  position: absolute;
  left: 2rem;
  top: 2rem;
  width: 2rem;
  height: 2rem;
}

.arrow {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 2rem;
  height: 2px;
  background-color: white;
}

.arrow::after,
.arrow::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  height: 100%;
  width: 45%;
  transform-origin: left center;
  background-color: white;
}

.arrow::after {
  transform: rotate(45deg);
}

.arrow::before {
  transform: rotate(-45deg);
}

/* 箭头 */

.grade-box {
  position: relative;
  flex-grow: 0.70;
  display: flex;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
}

.flower-bck {
  position: absolute;
}

.flower-bck:nth-child(1) {
  left: 0;
}

.flower-bck:nth-child(2) {
  right: 0;
  top: 0;
  transform: rotate(90deg)
}

.flower-bck:nth-child(3) {
  bottom: 0;
  left: 0;
  transform: rotate(-90deg)
}

.flower-bck:nth-child(4) {
  right: 0;
  bottom: 0;
  transform: scale(-1);
}


.lineBars {
  width: 80%;
  /* height: 50%; */
  margin: auto;
  font-size: 2em;
}


#member .head {
  font-size: 3rem;
  margin: auto 0;
  font-family: LCALLIG;
}

.cloud-bck {
  width: 100%;
  height: 30vw;
  background-image: url(./../images/cloud.png);
  background-position: right bottom;
  background-repeat: no-repeat;
  background-size: 50vw;
}


.memberName {
  margin-right: 0.5rem;
}